<template>

    <div>
          <Tablefilter :filter="filterModel" @search="search" @del="delTable()" @add="addTable()" >
          </Tablefilter>

                <commonTable :getTableList="getTableList()"
                             :refresh.sync="refresh"
                             :filter="filter"
                             :selectRow.sync="selectRow"
                             :rowClassName="rowClassName"
                             :columns="columns">
                </commonTable>
                <userEdit ref="userEdit" :userForm.sync="userForm" :refresh.sync="refresh" :editDialog.sync="editDialog"></userEdit>
    </div>
</template>

<script>
    import Tablefilter from '../components/table/commonTableFilter'
    import commonTable from '../components/table/commonTable'
    import operate from '../components/table/operate'
    import userEdit from './userEdit'
    import {roleState} from '../../config/index'


    export default {
                name: "userList",
                components: {
                    Tablefilter,
                    userEdit,
                    commonTable
                },
                data() {
                    let _this = this
                    return {
                        selectRow: [],
                        editData: {},
                        filter: {},
                        refresh: false,
                        columns: [
                               {label: _this.$t('common.operate'), prop: 'operate', render: this.render('operate'), width: 150, tooltip: false},
                               {type: 'selection', width: 55},
                                {label: _this.$t('user.userId'), prop: 'id', width: 180},
                               {label: _this.$t('user.userName'), prop: 'userName', width: 180},
                               {label: _this.$t('user.userType'), prop: 'userType', width: 180 , render: this.render('userType')},
                               {label: _this.$t('user.groupName'), prop: 'groupId', width: 180 , render: this.render('groupId')},
                        ],
                        filterModel: {
                            groupId: {
                                label: _this.$t('user.groupId'),
                                value: '',
                            },
                            userType: {
                                label: _this.$t('user.userType'),
                                options: roleState,

                            },

                        },
                        editDialog: false,
                        userForm:{
                            id:'',
                            userName:'',
                            userType:'',
                            groupId:'',
                            passwd:'',
                        },
                    }
                },
                methods: {
                    search(filter) {
                        this.filter = filter
                        this.refresh = true
                    },
                    delTable(Id) {

                        let params = Id ?  [{id:Id}] : this.selectRow.map(v => {
                            return {id:v.id}
                        })

                        this.$userRemove(params).then(response => {
                            if (response.code === 'success') {
                                this.$message.success(this.$t('common.delSuccess'))
                                this.refresh = true
                                this.selectRow = []
                            } else {
                                this.$message.error(this.$t('common.delError'))
                            }
                        })
                    },
                    addTable(row) {
                        this.editDialog = true

                        if(row){

                            for(let key in this.userForm){
                                this.userForm[key] =row[key] ;
                            }

                            //this.userForm = row

                        }
//                        this.$refs.userEdit.setImages()
                    },
                    getTableList() {
                        return this.$userList
                    },
                    render(prop) {
                        let render = {}
                        if (!prop) return;
                        render.operate = (h, params) => {
                            let options = [{
                                style:'',
                                click:[this.addTable,params.row],
                                label:this.$t('common.edit'),
                                type: 'warning',
                            },{
                                style:'',
                                click:[this.delTable,params.row.id],
                                label:this.$t('common.del'),
                                type: 'danger',
                            }]
                            return h(operate,{
                                props:{
                                    options:options
                                }
                            })
                        }


                        render.userType = (h, params) => {
                            let render = this.$t(roleState[params.row.userType].label);
                            return h('div', render)
                        }
                        render.groupId = (h, params) => {
                            if(params.row.groupId > 0) {
                                let render = params.row.groupId + "组";
                                return h('div', render)
                            }
                            return h('div', render)
                        }

                        return render[prop]
                    },
                },
                mounted() {

                },
                created(){
                    // this.getOrdersInfo()
                },
    }
</script>

<style lang="less">
    .tableInfo{
        div{
            padding-right: 20px;
            display: inline-block;
        }
    }
    .error-row{
        background-color: #f56c6c !important;
    }
    .info-row{
        background-color: #409eff !important;
    }
    .success-row{
        background-color: #67c23a !important;
    }
    .striped-row{
        background-color: #FAFAFA !important;
    }
    body .el-table__fixed-right{
        top:0.5px
    }
</style>